{extend name="base" /}
{block name="title"}{$typeInfo['title']}开源专题列表|程序员的收藏夹-专注于程序员学习、分享{/block}


{block name="header"}
	{include file="public/user_header" /}
{/block}

{block name="content"}
<div class="zbd-content">
	<div class="row">
	    <div class="w12 mb20">
	    	<div class="slider">
				<div class="slider-item div1-1 bg-blue">{$typeInfo['title']} 专题<br/>{$typeInfo['remark']}</div>
			</div>
	    </div>
	</div>
	<div class="page pt20">
		<div class="row" style="min-height: 550px;">
			<div class="w9">
				<div class="breadcrumb breadcrumb-zbd mb10">
				    <a href="/" class="icon ice-home"> 首页</a>
				    <a href="/project/special" class="icon ice-page-list"> 全部专题列表</a>
				    {$typeInfo['title']}专题
				    <a href="javascript:history.go(-1);" class="back">返回全部专题</a>
				</div>
				<div class="row">
					<div class="nav-menu zbd-nav-pro mr0 mb15 yy">
				        <ul class="nav-list">
				            <li><a href="javascript:;" class="JS-serrch blue" data-sort="">全部开源</a></li>
				            <li><a href="javascript:;" class="JS-serrch" data-sort="browse">最多人看</a></li>
				            <li><a href="javascript:;" class="JS-serrch" data-sort="create_time">最新收录</a></li>
				        </ul>
				    </div>
				</div>
				<div class="row baise" id="proList">
					
				</div>
				<div class="no_login pinglin-empyt">
			    	<p class="no_login_p icon ice-empty"> 暂无收录项目！</p>
			    </div>

				<div class="row" id="gengduo">
					<div class="gengduo cursor-pointer blue JS-next"><span id="loadtext">加载更多</span><span class="icon ice-arrow-triangle-b"></span></div>
				</div>
			</div>
			<div class="w3">
				<div class="box" data-scroll-class="finxzhuanti" data-scroll-top="250" data-scroll-delay="1" data-scroll-type="auto">
					<div class="box-title icon ice-page-list">
						<div class="left">专题描述</div>
					</div>
					<div class="box-content">
						<ul class="list bt11">
							<li class="list-item">
								<div class="type-pic-li">
									<img class="type-pic" src="{$typeInfo['pic_big']}">
									<p class="type_tj">共{$typeInfo['source_count']}个开源项目</p>
								</div>
								<span class="list-icon"><img class='type-icon align-middle' src="{$typeInfo['pic']}"></span>
								<span class="list-title"><a href="javascript:;" class="black small bold">{$typeInfo['title']}</a></span>
								<p class="miaoshus mt15">{$typeInfo['remark']}</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<input type="hidden" id="page" value="1">
	<input type="hidden" id="sort" value="">
	<input type="hidden" id="type_id" value="{$typeInfo['id']}">
</div>
<script type="text/javascript" src="/static/web/zbdui/src/jquery/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
	ice(function(){

		getList({
			page: ice("#page").val(),
			sort: ice("#sort").val(),
			type_id: ice("#type_id").val(),
		}, 'append');

		// 条件筛选
		ice(".JS-serrch").click(function(e) {
			var sort = ice(this).attr("data-sort")

			$('.JS-serrch').removeClass('blue');
			ice(this).addCss('blue')

			ice("#sort").val(sort)
			
			ice("#page").val(1)
			var maps = {
				page: 1,
				sort: sort,
				type_id: ice("#type_id").val()
			}
			getList(maps, 'html');
		})
		
		// 点击下一页
		ice(".JS-next").click(function(e) {
			ice("#loadtext").html('正在努力加载中...')
			var maps = {
				page: ice("#page").val(),
				sort: ice("#sort").val(),
				type_id: ice("#type_id").val(),
			}
			getList(maps);
		})

		// 请求接口
		function getList(maps, type='append')
		{
			ice.ajax({
			    url:'/project/getAjaxProject',
			    type:'get',
			    data: maps,
			    success:function(res){
			    	ice("#loadtext").html('加载更多')
			    	if(res.code == 1){
			    		ice.pop({content:res.message,icon:'fail'})
			    		return false

			    	} else{

				    	var content = '';
				    	var data = res.data
				    	for (var i = 0; i < data.length; i++) {
				    		content += '<div class="row mb20 bob1">'
								content += '<div class="zbd-fm-w3 left">'
									content += '<div class="picwai">'
										content += '<img class="zbd-fm left" src="'+data[i]['pic']+'">'
									content += '</div>'
								content += '</div>'
								content += '<div class="project-title right">'
									if(data[i]['is_top'] == 1){
										content += '<a href="/project/article?id='+data[i]['id']+'" class="project-title-a el"><span class="bg-red zhiding">置顶</span>'+data[i]['title']+' </a>'
									} else{
										content += '<a href="/project/article?id='+data[i]['id']+'" class="project-title-a el">'+data[i]['title']+' </a>'
									}
									content += '<div class="doc-intro-act">'+data[i]['remark']+'</div>'

									content += '<div class="project-user">'
										content += '<img class="project-user-pic align-middle" src="'+data[i]['user']['avatar']+'"> '+data[i]['user']['nickname']
										content += '<p class="tishide"><span class="mr15">所属：'+data[i]['type']['title']+'</span> <span class="mr15">收录于：'+data[i]['create_time']+'</span> <span>阅读：'+data[i]['browse']+'</span></p>'
									content += '</div>'
								content += '</div>'
							content += '</div>'
				    	}

				    	if(type == 'html'){

				    		if(res.data.length == 0){

						    	ice("#proList").html('')
				    			ice(".pinglin-empyt").show();
				    			ice("#gengduo").hide();
				    			ice("#proList").hide();

					    		return false;
					    	} else{

					    		ice("#proList").show();
				    			ice("#gengduo").show();
				    			ice("#proList").html(content)
					    	}
				    	} else{

				    		if(res.data.length == 0){
					    		ice.pop({content:'数据全部加载完'})
					    		ice("#gengduo").hide();
					    		return false;
					    	}

				    		// 下一页的情况
				    		ice("#proList").append(content)
				    		var page = parseInt(maps.page) + 1
				    		ice("#page").val(page)
				    	}
			    	}
			    }
			});
		}
	})
</script>
{/block}